Ext.require('Ext.data.Model');
Ext.require('Ext.data.Store');
Ext.require('Ext.view.View');
Ext.onReady(function(){
	Ext.define('Image', {
		extend: 'Ext.data.Model',
		id: 'Image',
		fields: [
			{name:'src', type:'string'},
			{name:'caption', type:'string'}
		]
	});
	Ext.create('Ext.data.Store', {
		id: 'imagesStore',
		model: 'Image',
		data: [
			{src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
			{src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
			{src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
			{src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'},
			{src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
			{src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
			{src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
			{src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'},
			{src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
			{src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
			{src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
			{src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
		]
	});
	var imageTpl = new Ext.XTemplate(
			'<div class="holder">',
				'<tpl for=".">',
					'<span class="item-container" style="thumb-wrap">',
						'<img id={caption} src="{src}"/>',
					'</span>',
				'</tpl>',
			'</div>'
		);

	Ext.create('Ext.view.View', {
		store: Ext.data.StoreManager.lookup('imagesStore'),
		renderTo: Ext.getBody(),
		tpl: imageTpl,
		itemSelector: 'div.thumb-wrap',
		emptyText: 'No images available'
	});	
});